<template>
  <div id="container">
    <div id="threeContained"></div>
  </div>
</template>
<script>
import * as THREE from 'three' //引入Threejs
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import Stats from 'three/examples/jsm/libs/stats.module'

// const OrbitControls = require("three-orbit-controls")(THREE);
export default {
  name: 'vue-three',
  data() {
    return {
      scene: '',
      light: '',
      camera: '',
      controls: '',
      renderer: '',
      load: '',
      clock: '',
      mixer: ''
    }
  },
  methods: {
    init() {
      var that = this
      let container = document.getElementById('threeContained')

      // 创建场景
      that.scene = new THREE.Scene()
      // that.scene.background = new THREE.Color(0x8cc7de)
      // 创建相机
      that.camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight,
        0.1,
        2000
      )
      // that.camera.position.set( -70, 25, 90 );
      // 定位相机，并且指向场景中心
      that.camera.position.x = 30
      that.camera.position.y = 30
      that.camera.position.z = 170
      that.camera.lookAt(that.scene.position)

      /// 显示三维坐标系
      var axes = new THREE.AxesHelper(100)
      // 添加坐标系到场景中
      // that.scene.add(axes);

      // 创建地面
      // const geometry = new THREE.BoxGeometry();
      // const material = new THREE.MeshPhongMaterial({ color: 0xffffff });
      // const cube = new THREE.Mesh(geometry, material);
      // that.scene.add(cube);

      // 创建地面的几何体
      var planeGeometry = new THREE.PlaneGeometry(100, 60)
      // 给地面物体上色
      var planeMaterial = new THREE.MeshStandardMaterial({ color: 0xcccccc })
      // 创建地面
      var plane = new THREE.Mesh(planeGeometry, planeMaterial)
      plane.material.opacity = 0.6
      plane.material.transparent = true
      plane.rotation.x = -0.5 * Math.PI
      plane.position.x = 0
      plane.position.y = 0
      plane.position.z = 0
      plane.castShadow = true
      // 接收阴影
      plane.receiveShadow = true
      // that.scene.add(plane);

      const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444)
      hemiLight.position.set(0, 1, 0)
      that.scene.add(hemiLight)

      const directionalLight1 = new THREE.DirectionalLight(0xffeeff, 0.8)
      directionalLight1.position.set(1, 1, 1)
      that.scene.add(directionalLight1)

      const directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.8)
      directionalLight2.position.set(-1, 0.5, -1)
      that.scene.add(directionalLight2)

      const ambientLight = new THREE.AmbientLight(0xffffee, 0.25)
      that.scene.add(ambientLight)

      // stats
      // that.stats = new Stats()
      // container.appendChild(that.stats.dom)

      // 材质
      // const normal = new THREE.TextureLoader().load(
      //   "./f7669-main/0dddf8de/alice/alice.FBX"
      // );

      // model
      that.loader = new FBXLoader()

      that.loader.load('./aa/1.FBX', function (object) {
        // that.mixer = new THREE.AnimationMixer( object );
        // const action = that.mixer.clipAction( object.animations[ 0 ] );
        // action.play();
        // object.traverse( function ( child ) {
        //   if ( child.isMesh ) {
        //     child.castShadow = true;
        //      child.receiveShadow = true;
        //  }
        // });

        object.traverse(function (child) {
          if (child.isMesh) {
            // child.material.specular.setScalar(0.1);
            // child.material.normalMap = normal;
          }
        })

        console.log(object)
        object.scale.set(0.1, 0.1, 0.1)
        // object.scale.set(1,1,1)
        that.scene.add(object)
        that.animate()
      })

      // 创建渲染器
      that.renderer = new THREE.WebGLRenderer({ alpha: true })
      // that.renderer.setClearAlpha(0) // 数值为0.7就是半透明
      that.renderer.setPixelRatio(window.devicePixelRatio)
      // 设置渲染器的初始颜色
      that.renderer.setClearColor(new THREE.Color(0xeeeeee))
      // 设置输出canvas画面的大小
      that.renderer.setSize(window.innerWidth, window.innerHeight)
      container.appendChild(that.renderer.domElement)
      that.renderer.setClearColor('#000000', 1) //设置背景颜色和透明度
      const controls = new OrbitControls(that.camera, that.renderer.domElement)
      controls.target.set(0, 12, 0)
      controls.update()
      // debugger
      // window.addEventListener('onpointerdown', that.selectObject())
      window.addEventListener('resize', that.onWindowResize)
    },

    onWindowResize() {
      this.camera.aspect = window.innerWidth / window.innerHeight
      this.camera.updateProjectionMatrix()

      this.renderer.setSize(window.innerWidth, window.innerHeight)
    },

    animate() {
      // requestAnimationFrame(this.animate);

      // this.renderer.render(this.scene, this.camera);

      // this.stats.update();

      requestAnimationFrame(this.animate)
      const delta = this.clock.getDelta()
      if (this.mixer) this.mixer.update(delta)
      this.renderer.render(this.scene, this.camera)
      // this.stats.update()
    },
    selectObject(event) {
      if (event.button != 0) return

      const mouse = new THREE.Vector2()
      mouse.x = (event.clientX / window.innerWidth) * 2 - 1
      mouse.y = -(event.clientY / window.innerHeight) * 2 + 1

      const raycaster = new THREE.Raycaster()
      raycaster.setFromCamera(mouse, this.camera)

      const intersected = raycaster.intersectObjects(this.scene.children, false)
      console.log(intersected)
      if (intersected.length) {
        const found = intersected[0]
        const faceIndex = found.faceIndex
        const geometry = found.object.geometry
        console.log(this.load)
        // const id = ifcLoader.ifcManager.getExpressId(geometry, faceIndex);

        const modelID = found.object.modelID
        // ifcLoader.ifcManager.createSubset( { modelID, ids: [ id ], scene, removePrevious: true, material: highlightMaterial } );
        // const props = ifcLoader.ifcManager.getItemProperties(modelID, id, true);
        // console.log(props);
        // this.renderer.render( this.scene, this.camera );
      }
    }
  },
  mounted() {
    this.clock = new THREE.Clock()
    this.init()
    this.animate()
    window.onpointerdown = this.selectObject
  }
}
</script>

<style lang="scss" scoped>
#container {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  /* margin: 0 auto; */
  height: 100vh;
  overflow: hidden;
}
</style>
